<template>
  <component :is="resolveLayout">
<!--    <app-bar></app-bar>-->
    <router-view></router-view>
    <!--    <upgrade-to-pro></upgrade-to-pro>-->
  </component>
</template>

<script>
import { computed } from '@vue/composition-api'
import { useRouter } from '@/utils'
import LayoutBlank from '@/layouts/Blank.vue'
import LayoutContent from '@/layouts/Content.vue'
import LayoutFull from "./layouts/Full";
import UpgradeToPro from './components/UpgradeToPro.vue'
import AppBar from './components/AppBar.vue'

export default {
  components: {
    LayoutBlank,
    LayoutContent,
    LayoutFull,
    UpgradeToPro,
    AppBar,
  },
  setup() {
    const { route } = useRouter()

    const resolveLayout = computed(() => {
      // Handles initial route
      if (route.value.name === null) return null

      if (route.value.meta.layout === 'blank') return 'layout-blank'
      if (route.value.meta.layout === 'full') return 'layout-full'

      return 'layout-content'
    })

    return {
      resolveLayout,
    }
  },
}
</script>

<style lang="scss">
.v-data-table > .v-data-table__wrapper > table > tbody > tr > td,
.v-data-table > .v-data-table__wrapper > table > thead > tr > th, {
  font-size: 18px !important;
}
</style>
